<template>
    <div id="box">
        <div class="head">
            <img src="../../assets/images/prev.png" alt="" @click="back">
            <!-- <div @click="share">分享</div> -->
            <van-cell title="分享" @click="showShare = true" class="share" />
                <van-share-sheet
                v-model="showShare"
                title="立即分享给好友"
                :options="options"
                @select="onSelect"
            />
        </div>
    </div>
</template>
<script>
import { Toast } from 'vant';
export default {
  name: "Head",
   data() {
    return {
      showShare: false,
      options: [
        { name: '微信', icon: 'wechat' },
        { name: '微博', icon: 'weibo' },
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' },
      ],
    };
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    share() {
      console.log(1);
    },
    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },
  }
};
</script>

<style scoped>
#box {
  background: #536387;
}
.head {
  height: 0.45rem;
  width: 3.32rem;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.head img {
  height: 0.2rem;
  width: 0.12rem;
}
.head .share{
    width: 0.57rem;
    height: 0.27rem;
    position: relative;
    background: #fee9f0;
    border-radius: 0.11rem;
}
.head .share span{
    font-size: 0.12rem;
    position: absolute;
    top: 0.02rem;
    left: 0.13rem; 
    color: #ff0357;
}
</style>
